import React, { Component, Fragment } from 'react';
import ContainerWrapper from '@/components/ContainerWrapper';
import { Form, Input, Row, Col, Select, Button, Table } from 'antd';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';

const { Option } = Select;
const style = {
  mr10: {
    marginRight: '10px'
  },
  mt40: {
    marginTop: '40px'
  }
}
@connect(({ knowFlow, user }) => ({
  knowFlow,
  user
}))
class AccountManagement extends Component {
  componentDidMount() {
    this.fetchData()
    console.log('++++', this.props.user)
  }
  // 获取数据
  fetchData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'knowFlow/fetch',
    });
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  // 重置
  handleReset = () => {
    this.props.form.resetFields();
  }
  // 新建用户
  newAccount = () => {
    router.push({
      pathname: 'newAccount'
    })
  }
  renderSearchContainer = () => {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
        <Row>
          <Col span={8}>
            <Form.Item label="选择日期">
              {getFieldDecorator('enterpriseName', {
                rules: [{ required: false, message: '请输入企业名称!' }],
              })(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label='服务状态'>
              {getFieldDecorator('serviceStatus', {
                rules: [
                  {
                    required: false,
                    message: '请选择企业状态!',
                  },
                ],
              })(<Select placeholder='请选择'>
                <Option value="1">Option 1</Option>
                <Option value="2">Option 2</Option>
                <Option value="3">Option 3</Option>
              </Select>)}
            </Form.Item>
          </Col>
          <div className={styles.btn}>
            <Button type="primary" htmlType="submit">查询</Button>
            <Button type="default" onClick={this.handleReset}>重置</Button>
            <Button type='primary' onClick={this.newAccount}>+ 创建用户</Button>
          </div>
        </Row>
      </Form>
    )
  }
  render() {
    const { knowFlow: { purchase: { data, columns } } } = this.props;
    return (
      <ContainerWrapper>
        {this.renderSearchContainer()}
        <Table style={style.mt40} columns={columns} dataSource={data} />
      </ContainerWrapper>
    );
  }
}
AccountManagement = Form.create()(AccountManagement)
export default AccountManagement;
